<template>
    <div>
        <button type="button" class="btn btn-xs btn-info" v-on:click="selectFile()">
            <i class="ace-icon fa fa-upload bigger-120">&nbsp;{{text}}</i>
        </button>&nbsp;
        <!--设置动态id，v-bind -- props-->
        <input class="hidden" v-on:change="uploadFile()" v-bind:id="fileId+'-input'"
               type="file" ref="file">

    </div>
</template>

<script>
    export default {
        name: "file-icon",
        props:{
            text:{
                default:'上传文件'
            },
            fileId:{
                default:'file-upload'
            },
            //接收teacher的回调函数
            afterUpload:{
                type:Function,
                default: null
            },
            //暴露定义的文件上传类型
            suffixTag:{
                default:[]
            },
            //增加获取枚举类型，提交表单时使用
            use:{
                default:""
            }
        },
        //data必须return，否则报错：vue 报错 data functions should return an object: 和 Cannot read property '__ob__' of undefined
        data:function () {
            return {

            }
        },
        methods:{
            /**
             * 头像上传
             */
            uploadFile(){
                let _this=this;
                //使用表单方式提交图片：FormData()
                let formData=new window.FormData();
                console.log("程序进入上传");
                //获取file-icon变量
                let fileIcon=_this.$refs.file.files[0];
                //判断文件格式
                //1.定义支持文件类型
                let suffixTag=_this.suffixTag;
                //2.获取图片文件名
                let fileName=fileIcon.name;
                //3.通过计算，获取后缀名
                let suffix=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase();
                //4.定义后缀校验变量
                let validateSuffix=false;
                for(let i=0;i<suffixTag.length;i++){
                    if(suffixTag[i].toLowerCase()===suffix){
                        //校验通过，结束当前程序
                        validateSuffix=true;
                        break;
                    }
                }
                if(!validateSuffix){
                    Toast.warning("文件格式不正确！只支持上传："+suffixTag.join(","));
                    //上传完毕，清空之前的数据，防止同一图片二次提交没有提示
                    $("#"+_this.fileId+"-input").val("");
                    return;
                }

                //key变量:"file" 必须和后端controller参数名一致
                formData.append('file',fileIcon);
                //提交表单时，将枚举类型同步提交
                formData.append('use',_this.use);

                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/admin/teacher/upload' , formData)
                    .then((responseImg)=>{
                        Loading.hide();
                        let response=responseImg.data;
                        //接收controller传来的responseData

                        console.log("上传文件成功-头像地址：",response);
                        /**
                         * 组件中需要添加回调函数，这里没有teacher
                         */
                        _this.afterUpload(response);
                        //上传完毕，清空之前的数据，防止同一图片二次提交没有提示
                        $("#"+_this.fileId+"-input").val("");
                    });
            },
            /**
             * 选择图片按钮
             */
            selectFile(){
                let _this=this;
                //$("#file-upload-input").trigger("click");
                $("#"+_this.fileId+"-input").trigger("click");
            }
        }
    }
</script>

<style scoped>

</style>